<template>
  <view class="steps-container">
    <!-- 步骤条容器 -->
    <view class="steps-progress">
      <view class="progress-line"></view>
      <view class="progress-active" :style="{width: progressWidth}"></view>
      <view 
        v-for="(step, index) in steps" 
        :key="index" 
        class="step-node" 
        :style="{left: `${index * (100/(steps.length-1))}%`}"
        :class="{active: index <= currentStep, inactive: index > currentStep}"
      >
        <view class="node-number">{{ step.number }}</view>
        <view class="node-icon" v-if="index == currentStep">
          <image src="/static/img/buscar.png" mode="aspectFit" class="icon-image" />
        </view>
        <view class="node-label">
          <text class="chinese">{{ step.chinese }}</text>
          <text class="english">{{ step.english }}</text>
        </view>
      </view>
    </view>
    
    <!-- 控制按钮 -->
  <!--  <view class="controls">
      <button class="control-btn prev" @click="prevStep" :disabled="currentStep === 0">上一步</button>
      <button class="control-btn next" @click="nextStep" :disabled="currentStep === steps.length - 1">下一步</button>
    </view> -->
  </view>
</template>

<script>
export default {
  data() {
    return {
      currentStep: 1, // 当前激活的步骤索引（从0开始）
      steps: [
        {
          number: 1,
          chinese: "金属",
          english: "Metal"
        },
        {
          number: 2,
          chinese: "胶架",
          english: "Acetate"
        },
        {
          number: 3,
          chinese: "零件",
          english: "Decoration"
        },
        {
          number: 4,
          chinese: "物流中心",
          english: "DC"
        }
      ]
    };
  },
  computed: {
    progressWidth() {
      return `${(this.currentStep / (this.steps.length - 1)) * 100}%`;
    }
  },
  methods: {
    prevStep() {
      if (this.currentStep > 0) {
        this.currentStep--;
      }
    },
    nextStep() {
      if (this.currentStep < this.steps.length - 1) {
        this.currentStep++;
      }
    }
  }
};
</script>

<style scoped>
.steps-container {
  width: 80%;
  margin: 0 auto;
}

.steps-progress {
  position: relative;
  height: 180rpx;
}

.progress-line {
  position: absolute;
  height: 4rpx;
  background-color: #D9D9D9;
  top: 40rpx;
  left: 0;
  right: 0;
  z-index: 1;
}

.progress-active {
  position: absolute;
  height: 4rpx;
  background-color: #7C643C;
  top: 40rpx;
  left: 0;
  z-index: 2;
  transition: width 0.3s ease;
}

.step-node {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: translateX(-50%);
  z-index: 3;
}

.node-number {
  width: 60rpx;
  height: 60rpx;
  border-radius: 50%;
  background-color: #D9D9D9;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 28rpx;
  font-weight: bold;
  color: #fff;
  margin-bottom: 16rpx;
  transition: background-color 0.3s ease;
}

.step-node.active .node-number {
  background-color: #7C643C;
}

.node-icon {
  position: absolute;
  top: -40rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}

.icon-image {
  width: 40rpx;
  height: 40rpx;
}

.node-label {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.chinese {
  font-size: 26rpx;
  font-weight: 500;
  color: #7C643C;
  margin-bottom: 4rpx;
  width: 100rpx;
  text-align: center;
}

.english {
  font-size: 20rpx;
  color: #7C643C;
  width: 100rpx;
  text-align: center;
}

.step-node.inactive .chinese,
.step-node.inactive .english {
  color: #D9D9D9;
}

.controls {
  display: flex;
  justify-content: center;
  gap: 30rpx;
}

.control-btn {
  padding: 16rpx 40rpx;
  border-radius: 8rpx;
  font-size: 28rpx;
  font-weight: 500;
  background-color: #f5f5f5;
  color: #333;
}

.control-btn.next {
  background-color: #7C643C;
  color: #fff;
}

.control-btn:disabled {
  opacity: 0.5;
}
</style>